<template>
  <g class="sun">
    <!-- 太阳光晕效果 -->
    <defs>
      <radialGradient id="sunGlow" cx="50%" cy="50%" r="50%">
        <stop offset="0%" style="stop-color:#FDB813;stop-opacity:1" />
        <stop offset="70%" style="stop-color:#FF8C00;stop-opacity:0.8" />
        <stop offset="100%" style="stop-color:#FF4500;stop-opacity:0.3" />
      </radialGradient>
      <filter id="glow">
        <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
        <feMerge> 
          <feMergeNode in="coloredBlur"/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>
    </defs>
    
    <!-- 外层光晕 -->
    <circle
      :cx="centerX"
      :cy="centerY"
      :r="sunData.radius + 8"
      fill="url(#sunGlow)"
      opacity="0.4"
      class="sun-glow"
    />
    
    <!-- 太阳主体 -->
    <circle
      :cx="centerX"
      :cy="centerY"
      :r="sunData.radius"
      :fill="sunData.color"
      filter="url(#glow)"
      class="sun-body"
      @mouseenter="showTooltip = true"
      @mouseleave="showTooltip = false"
      @click="$emit('click', sunData)"
    />
    
    <!-- 太阳表面纹理效果 -->
    <circle
      :cx="centerX"
      :cy="centerY"
      :r="sunData.radius - 2"
      fill="none"
      stroke="#FFD700"
      stroke-width="1"
      opacity="0.6"
      class="sun-surface"
    />
    
    <!-- 悬停提示 -->
    <g v-if="showTooltip" class="tooltip">
      <rect
        :x="centerX + sunData.radius + 10"
        :y="centerY - 15"
        width="60"
        height="30"
        fill="rgba(0, 0, 0, 0.8)"
        rx="4"
      />
      <text
        :x="centerX + sunData.radius + 40"
        :y="centerY"
        text-anchor="middle"
        fill="white"
        font-size="12"
        dy="0.3em"
      >
        {{ sunData.nameCn }}
      </text>
    </g>
  </g>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { SUN_DATA } from '../data/planets';

// Props
interface Props {
  centerX: number;
  centerY: number;
}

const props = withDefaults(defineProps<Props>(), {
  centerX: 400,
  centerY: 300
});

// Emits
defineEmits<{
  click: [data: typeof SUN_DATA];
}>();

// 响应式数据
const sunData = SUN_DATA;
const showTooltip = ref(false);
</script>

<style scoped>
.sun-body {
  cursor: pointer;
  transition: all 0.3s ease;
}

.sun-body:hover {
  filter: url(#glow) brightness(1.1);
}

.sun-glow {
  animation: pulse 4s ease-in-out infinite alternate;
}

.sun-surface {
  animation: rotate 20s linear infinite;
  transform-origin: v-bind('centerX + "px " + centerY + "px"');
}

.tooltip {
  pointer-events: none;
  animation: fadeIn 0.3s ease;
}

@keyframes pulse {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  100% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>